<template>
  <view class="serviceProcess">
    <view class="serviceProcess-box">
      <view class="serviceProcess-title">项目遴选标准：</view>
      <text class="des" style="color: #f25559">
        项目优先向病情最重、自费负担最重，难以获得普通商业项目的慢病患者免费提供。
      </text>
    </view>

    <view class="serviceProcess-box">
      <view class="serviceProcess-title">遴选分批加入：</view>
      <text class="des">项目方将审核您的申请信息，并分批遴选符合标准的申请人加入大病保障，请您耐心等待。</text>
    </view>

    <view class="serviceProcess-box agreement">
      <view class="agreement-title">
        <checkbox-group @change="readChange">
          <label>
            <checkbox class="checkbox" :value="read" />
            <text>本人/服务对象：</text>
          </label>
        </checkbox-group>
      </view>
      <view class="article before">· 已患慢性病，难以购买获得普通商业项目，自愿加入本计划；</view>
      <view class="article before">· 同意遵守按需配药制度，接受环保包装配药；</view>
      <view class="article before">· 同意以下相关计划协议：</view>
      <view v-for="(item, index) in article" :key="item.articleId" class="article article-xy">
        {{ index + 1 }}.
        <text style="color: #2680eb" @click="link(item.articleId)">《{{ item.name }}》</text>
      </view>
    </view>
    <fixed-bottom-button>
      <view class="serviceProcess-btn" @click="agree">开始申请</view>
    </fixed-bottom-button>
  </view>
</template>

<script>
import { getServerPackInof } from '@/api/join';
import { mapState } from 'vuex';
import fixedBottomButton from '@/components/fixedBottomBtn';
// 引入统计
import { tongji } from '@/utils/tools.js';

export default {
  components: {
    fixedBottomButton
  },
  data() {
    return {
      serverId: '',
      read: 1,
      article: []
    };
  },

  onLoad(opt) {
    if (opt) {
      this.serverId = opt.serverId;
      this.init();
    } else {
      uni.showModal({
        content: '参数错误',
        showCancel: false
      });
      // this.serverId = '112';
      // this.init();
    }
  },

  computed: {
    ...mapState('join', {
      myself: (state) => {
        if (state.storeFormData.patientId === state.patientid) {
          return true;
        } else {
          return false;
        }
      }
    })
  },

  methods: {
    async init() {
      const res = await getServerPackInof(this.serverId);
      if (res.code !== 0) {
        uni.showToast({
          title: res.message,
          icon: 'none'
        });
        return;
      }

      /**
       *  我也不知道为什么这样判断
       * 103为受益人非本人授权协议 102为本人
       */
      let pack = [];
      res.data[0].insurancePackageSpecs.forEach((item) => {
        if (item.type === 7) {
          pack.push(item);
        }
        if (this.myself) {
          if (item.type > 100 && item.productType === 1 && item.type !== 103) {
            pack.push(item);
          }
        } else {
          if (item.type > 100 && item.productType === 1 && item.type !== 102) {
            pack.push(item);
          }
        }
      });
      this.article = pack;
    },

    readChange(e) {
      this.read = e.detail.value[0];
    },

    link(id) {
      this.$wxPromise.navigateTo({
        url: '/pages/agreementReading/index?articleId=' + id
      });
    },

    agree() {
      tongji('01622b03-57bf-4f54-983d-80d3c9eab97c');
      if (this.read !== '1') {
        uni.showModal({
          content: '请本人/服务对象阅读并同意相关协议。',
          showCancel: false
        });
        return;
      }
      // this.$wxPromise.navigateTo({
      //   url: '/pages/diseaseAssess/index'
      // });
      this.$store.commit('assess/DEL_ALL_DRUGS');
      this.$wxPromise.navigateTo({ url: '/pages/diseaseAssess/index' }); // 正确
    }
  }
};
</script>

<style lang="scss">
.serviceProcess {
  .checkbox {
    transform: scale(0.8);
    position: relative;
    top: -4rpx;
  }
  .checkbox .wx-checkbox-input {
    width: 40rpx;
    height: 40rpx;
    border-radius: 50%;
    border-color: rgba(0, 0, 0, 0.4);
  }
  .checkbox .wx-checkbox-input.wx-checkbox-input-checked {
    background: #f34e1c;
    border-color: #f34e1c;
  }
  .checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
    width: 28rpx;
    height: 28rpx;
    line-height: 28rpx;
    text-align: center;
    font-size: 22rpx;
    color: #fff;
    background: transparent;
    transform: translate(-50%, -50%) scale(1);
    -webkit-transform: translate(-50%, -50%) scale(1);
  }
}
</style>

<style lang="scss" scoped>
.serviceProcess {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  overflow-x: hidden;
  padding-bottom: 180rpx;

  &-box {
    margin: 24rpx;
    background: #ffffff;
    border-radius: 16rpx;
    padding: 24rpx;
  }
  &-title {
    font-size: 38rpx;
    font-weight: bold;
    margin-bottom: 10rpx;
  }
  .des {
    font-size: 32rpx;
    color: rgba(0, 0, 0, 0.55);
  }

  .agreement {
    &-title {
      font-size: 34rpx;
      font-weight: bold;
    }
  }

  .article {
    margin: 14rpx 0 0;
    font-size: 30rpx;
    color: rgba(0, 0, 0, 0.55);
    &-xy {
      // margin-left: 38rpx;
    }
  }
  .before {
    // margin-left: 16rpx;
  }
  .before::before {
    // content: ' ';
    // width: 12rpx;
    // height: 12rpx;
    // background: #000000;
    // display: inline-block;
    // border-radius: 50%;
    // position: relative;
    // top: -4rpx;
    // margin-right: 10rpx;
  }
  .article:first-child {
    margin-top: 0;
  }
  &-btn {
    width: 702rpx;
    height: 88rpx;
    background: -webkit-linear-gradient(214deg, #fe894d 0%, #ef3931 100%);
    background: linear-gradient(236deg, #fe894d 0%, #ef3931 100%);
    opacity: 1;
    border-radius: 44rpx;
    color: #fff;
    font-size: 36rpx;
    text-align: center;
    line-height: 88rpx;
  }
}
</style>
